<template>
	<image class="sol-image" :style="calcWH" :src="calcSrc" :mode="mode" :lazy-load="lazy" @load="$_load" @error="$_error" @click="$_click"></image>
</template>

<script>
	/**  
	 * 图片封装占位默认图片组件
	 * @property {Object} mode 裁剪模式  
	 * @property {Object} lazy 懒加载  
	 * @property {Object} src 图片地址  
	 * @property {Object} src-error 图片占位图  
	 * @property {String} widht 宽度，无默认单位，  
	 * @property {String} height 高度，无默认单位，  
	 * @event {Function} click 点击事件  
	 * @event {Function} error 发生错误加载事件  
	 */
	export default {
		name: 'sol-image',

		props: {
			// 懒加载
			lazy: {
				type: Boolean,
				default: true
			},
			// 图片地址
			src: {
				type: String,
				default: '/static/icon-default/icon_logo.png'
			},
			// 错误占位图片地址
			srcError: {
				type: String,
				default: '/static/icon-default/icon_avatar.png'
			},
			// 裁剪模式
			mode: {
				type: String,
				default: 'scaleToFill'
			},
			// 宽度，无默认单位
			width: {
				type: String,
				default: "100%"
			},
			// 高度，无默认单位
			height: {
				type: String,
				default: "100%"
			},
		},

		data() {
			return {
				// 图片是否加载错误，占位图
				isError: false,
			};
		},

		computed: {
			// 计算改变图片地址
			calcSrc() {
				// 套上尺寸
				let src = this.src;
				// 错误或者空
				if (this.isError || !this.src) {
					src = this.srcError;
				}
				return src;
			},
			// 计算宽高
			calcWH(){
				return `width: ${this.width};height: ${this.height};`;
			}
		},

		methods: {
			// 点击图片
			$_click() {
				this.$emit('click');
			},
			// 图片加载失败
			$_error(e) {
				this.isError = true;
				this.$emit('error', e);
			},
			// 图片加载完成
			$_load(e) {
				this.$emit('load', e);
			},
			
		}
	}
</script>

<style scoped lang="scss">
	.sol-image {
		width: 100%;
		height: 100%;
		background-color: transparent;
		display: block;
	}
</style>
